/**
 *@desc
 *@author bie
 *@date $
 */
/*
 *    文本域封装
 *
 * */
import React, { useEffect, useState } from 'react';
import { Input } from 'antd';
import PropTypes from 'prop-types';

const { TextArea } = Input;
const TextAreaEnhance = (props) => {
  const [currentValue, setCurrentValue] = useState('');
  const { maxLength = 100, onChange, ...res } = props;

  useEffect(() => {
    setCurrentValue(props.value || '');
  }, [props.value]);

  const triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    if (onChange) {
      onChange(changedValue);
    }
  };
  const color = currentValue.length >= maxLength ? 'red' : '';

  return (
    <span style={{ display: 'inlineBlock', position: 'relative' }}>
      <TextArea
        {...res}
        type="text"
        value={currentValue}
        onChange={triggerChange}
        autoSize={{ minRows: 3, maxRows: 6 }}
        style={{ paddingBottom: '15px' }}
        maxLength={maxLength}
      />
      <span
        style={{
          position: 'absolute',
          bottom: '2px',
          right: '10px',
          color: '#c5c5c5',
          lineHeight: '13px',
        }}
      >
        <span style={{ color }}>{currentValue.length || 0}</span>/
        <span>{maxLength}</span>
      </span>
    </span>
  );
};
/*
 * 关键附加参数，其余参数 请参考 antd 文本域组件
 * */
TextAreaEnhance.propTypes = {
  value: PropTypes.string,
  maxLength: PropTypes.number,
};
export default TextAreaEnhance;
